<template>
	<view>
		<c-navBar :title="`商品评价 (${page.total})`" isPerch></c-navBar>
		<view class="header">
			<view class="content">

				<view class="left">
					<p style="color: black;">综合评分</p>
					<p><span
							style="font-size:32px;font-style:italic;margin-right:10rpx;">{{ satisfaction.analysis }}</span>
						&nbsp;&nbsp;满意</p>
					<uni-rate allow-half readonly size="18" :value="satisfaction.analysis" activeColor="red" />
				</view>
				<view class="right">
					<view style="width: 150rpx;">
						<u-grid :col="5">
							<u-grid-item v-for="(item,index) in 5" :key="index"><u-icon name="star-fill" :size="16"
									color="#dcdfe6"></u-icon></u-grid-item>
						</u-grid>
						<u-grid :col="5">
							<u-grid-item></u-grid-item>
							<u-grid-item v-for="(item,index) in 4" :key="index"><u-icon name="star-fill" :size="16"
									color="#dcdfe6"></u-icon></u-grid-item>
						</u-grid>
						<u-grid :col="5">
							<u-grid-item></u-grid-item>
							<u-grid-item></u-grid-item>
							<u-grid-item v-for="(item,index) in 3" :key="index"><u-icon name="star-fill" :size="16"
									color="#dcdfe6"></u-icon></u-grid-item>
						</u-grid>
						<u-grid :col="5">
							<u-grid-item></u-grid-item>
							<u-grid-item></u-grid-item>
							<u-grid-item></u-grid-item>
							<u-grid-item v-for="(item,index) in 2" :key="index"><u-icon name="star-fill" :size="16"
									color="#dcdfe6"></u-icon></u-grid-item>
						</u-grid>
						<u-grid :col="5">
							<u-grid-item></u-grid-item>
							<u-grid-item></u-grid-item>
							<u-grid-item></u-grid-item>
							<u-grid-item></u-grid-item>
							<u-grid-item v-for="(item,index) in 1" :key="index"><u-icon name="star-fill" :size="16"
									color="#dcdfe6"></u-icon></u-grid-item>
						</u-grid>
					</view>
					<view style="flex:1;margin-left:10px;">
						<progress style="margin-bottom:10px;margin-top:5px;" :percent="satisfaction.best"
							stroke-width="8" border-radius="10" activeColor="#FF0000" />
						<progress style="margin-bottom:10px;margin-top:5px;" :percent="satisfaction.good"
							stroke-width="8" border-radius="10" activeColor="#FF0000" />
						<progress style="margin-bottom:10px;margin-top:5px;" :percent="satisfaction.medium"
							stroke-width="8" border-radius="10" activeColor="#FF0000" />
						<progress style="margin-bottom:10px;margin-top:5px;" :percent="satisfaction.bad"
							stroke-width="8" border-radius="10" activeColor="#FF0000" />
						<progress style="margin-bottom:10px;margin-top:5px;" :percent="satisfaction.worst"
							stroke-width="8" border-radius="10" activeColor="#FF0000" />

					</view>

				</view>
			</view>
		</view>

		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="main" @scrolltolower="getPageData">
				<view style="display:flex;" class="mb20" v-for="(item, index) in evaluateList" :key="index">
					<view class="main-left">
						<u-avatar :src="item.avatar"></u-avatar>
					</view>
					<view class="main-middle">
						<p>{{ item.name?item.name:'-' }}</p>
						<view style="display:flex">
							<uni-rate allow-half readonly size="18" :value="item.score" activeColor="red" />
							<!-- <view style="margin-left:20rpx;font-size:12px;color:gray;">购买的商品</view> -->
						</view>
						<view class="mt20">{{ item.remark }}</view>
						<view class="mt20 mb20 df aic fww" v-if="item.imgUrl">
							<view v-for="(it, ii) in item.imgUrl" :key="ii" style="
						      width: 180rpx;
						      height: 180rpx;
						      border-radius: 10rpx;
						      overflow: hidden;
						    " class="mr10 mb10">
								<image style="width: 100%" :src="it" mode="widthFix" @click="previewImage(item.imgUrl, ii)" />
							</view>
						</view>
						<view style="font-size:12px;color:gray;">
							<uni-dateformat format='MM-dd' :date="item.createTime"></uni-dateformat>
						</view>
						<view style="width:110%;">
							<u-line color="gray" />
						</view>
					</view>
					<view class="main-right">
						<!-- <image :src="
						    1===1
						      ? `/static/tabbar/collect-active.png`
						      : `/static/tabbar/collect.png`
						  " style="width:20px;height:20px"></image> -->
					</view>

				</view>

			</scroll-view>
		</view>

	</view>

</template>

<script>
	import {
		init_frontendList,
		init_commentAnalysis
	} from "@/api/node.js";
	export default {
		data() {
			return {
				satisfaction: {},
				evaluateList: [],
				page: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				goodId: '',
			}
		},
		onLoad(option) {
			this.goodId = option.goodId;
			this.getData()
			this.getcommentAnalysis()
		},
		methods: {
			async getcommentAnalysis() {
				const res = await init_commentAnalysis(this.goodId);
				this.satisfaction = res
				console.log("getcommentAnalysis: ", res)
			},
			getPageData() {
				this.page.pageNum+=1
				this.getData()
			},
			async getData() {
				let arr = [];
				const params = {
					goodsId: this.goodId,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize,
				};
				const res = await init_frontendList(params);
				this.page.total = res.total;
				res?.list?.forEach((e) => {
					arr.push({
						...e,
						imgUrl: e?.imgs?.split(","),
					});
				});
				this.evaluateList.push(...arr)
				console.log(this.evaluateList)

			},
			previewImage(images, index) {
				uni.previewImage({
					current: index,
					urls: images
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: #f7f7f7;
		padding: 30rpx;

		.content {
			background: white;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 5px;
			display: flex;
		}

		.left {
			width: 30%;
			color: red;
			letter-spacing: 1px;

			p {
				margin-bottom: 10rpx;
			}
		}

		.right {
			flex: 1;
			display: flex;
		}
	}

	.main {
		height: 1100rpx;
		display: flex;
		font-size: 14px;

		&-left {
			width: 80rpx;
			padding: 24rpx;
		}

		&-middle {
			flex: 1;
			margin: 20rpx 0;
		}

		&-right {
			width: 80rpx;
			padding: 26rpx 0;
		}
	}
</style>